<script setup lang="ts">
import { ref, onMounted } from "vue";
import type { TabsPaneContext } from "element-plus";
import MeetingMain from "@/components/front/main/MeetingMain.vue";
import TeacherMain from "@/components/front/main/TeacherMain.vue";
import CourseMain from "@/components/front/main/CourseMain.vue";
import OpenCourse from "@/components/front/main/OpenCourse.vue";
import VipCourse from "@/components/front/main/VipCourse.vue";
import router from "@/router";
import { meetingStore } from "@/stores/frontData/he/main";
// 请求
import { findMeeting } from "@/api/student/he/frontMain";

const store = meetingStore();
// 学校进度
const jindu = ref(true);

onMounted(() => {
  findMeeting().then((res) => {
    // console.log(res);
    if (res.data.msg == "请求成功") {
      store.findMeet(res.data.data);
    }
  });
});
const activeName = ref("first");

// 登录
const login = () => {
  // router.push("/");
  jindu.value = false;
};

// 去往搜索列表
const goSearch = () => {
  router.push("/search");
};

//去往课程表
const goClassList = () => {
  router.push("/myClassList");
};

const handleClick = (tab: TabsPaneContext, event: Event) => {
  // console.log(tab, event);
};
</script>
<template>
  <div id="main">
    <div class="mainHeader">
      <el-image
        style="height: 100%"
        src="https://onlineclass2-1256902071.cos.ap-chengdu.myqcloud.com/onlineclass2/96611702034198874.png"
        fit="fit"
      />
      <div class="loginBox">
        <template v-if="jindu">
          <div>跟进你的学习进度</div>
          <img
            src="../../assets//images/cat.png"
            alt=""
            style="width: 80%; height: 60%"
          />

          <div><div class="btn" @click="login">登录</div></div>
        </template>
        <template v-else>
          <div style="text-align: left">
            <div>姓名：{{ store.student.name }}</div>
            <div>邮箱:</div>
            <div>{{ store.student.email }}</div>
            <div style="text-align: center; margin-top: 40px">
              <el-button type="success" @click="goClassList"
                >我的课程表</el-button
              >
            </div>
          </div>
        </template>
      </div>
    </div>
    <div class="mainContainer">
      <el-tabs
        v-model="activeName"
        class="demo-tabs"
        @tab-click="handleClick"
        stretch
      >
        <el-tab-pane label="精选推荐" name="first" class="mainContainer">
          <div class="mainBox">
            <!-- 会议 -->
            <div class="meeting">
              <MeetingMain></MeetingMain>
            </div>

            <!-- 工程师 -->
            <div class="teacher">
              <TeacherMain></TeacherMain>
            </div>

            <!-- 精选课程 -->
            <div class="course">
              <CourseMain></CourseMain>
            </div>

            <!-- 公开课 -->
            <div class="openCourse">
              <OpenCourse></OpenCourse>
            </div>

            <!-- vip课 -->
            <div class="vipCourse">
              <VipCourse></VipCourse>
            </div>

            <!-- 查看类目 -->
            <div class="query" @click="goSearch">查看java类目，共800个课程</div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<style scoped>
* {
  color: black;
}
.mainHeader {
  width: 100%;
  height: 250px;
  margin: auto;
  background-color: #40adda;
  position: relative;
  text-align: center;
}
.loginBox {
  position: absolute;
  width: 180px;
  height: 150px;
  top: 30px;
  right: 15%;

  background-color: white;
  border-radius: 2px;
  padding: 20px;
}
.btn {
  display: inline-block;
  background-color: #409eff;
  padding: 10px 60px;
  border-radius: 2px;
  color: white;
  margin-left: calc(50% - 75px);
  cursor: pointer;
}

/* 选项 */
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

/* 内容 */
.mainBox {
  width: 70%;
  /* height: 700px; */
  /* background-color: #6b778c; */
  margin: auto;
}
.meeting {
  margin-top: 10px;
}
.teacher {
  margin-top: 20px;
}
.course {
  margin: 40px 0px;
}
.query {
  font-size: 16px;
  text-align: center;
  padding: 10px;
  box-shadow: 1px 0px 0px 5px #f5f7fa;
}
</style>
